/**
 * Created by 邵敬超 on 2017/10/30.
 */

var WINDOW_WIDTH = document.body.offsetWidth;
var WINDOW_HEIGHT = document.body.offsetHeight;
var canvas,context;
var num = 500;
var stars = [];
var mouseX = WINDOW_WIDTH/2;
var mouseY = WINDOW_HEIGHT/2;
var rnd;

window.onload = function(){
  canvas = document.getElementById('canvas');
  canvas.width = WINDOW_WIDTH;
  canvas.height = WINDOW_HEIGHT;
  
  context = canvas.getContext('2d');
  
  addStar();
  setInterval(render,33);
  liuxing();
  
  // render();
  document.body.addEventListener('mousemove',mouseMove);
}

function liuxing(){
  var time = Math.round(Math.random()*3000+33);
  setTimeout(function(){
    rnd = Math.ceil(Math.random()*stars.length)
    liuxing();
  },time)
}

function mouseMove(e){
  //因为是整屏背景，这里不做坐标转换
  mouseX = e.clientX;
  mouseY = e.clientY;
}

function render(){
  context.fillStyle = 'rgba(0,0,0,0.1)';
  context.fillRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
  // context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
  for(var i =0; i<num ; i++){
    var star = stars[i];
    if(i == rnd){
      star.vx = -5;
      star.vy = 20;
      context.beginPath();
      context.strokeStyle = 'rgba(255,255,255,'+star.alpha+')';
      context.lineWidth = star.r;
      context.moveTo(star.x,star.y);
      context.lineTo(star.x+star.vx,star.y+star.vy);
      context.stroke();
      context.closePath();
    }
    star.alpha += star.ra;
    if(star.alpha<=0){
      star.alpha = 0;
      star.ra = -star.ra;
      star.vx = Math.random()*0.2-0.1;
      star.vy = Math.random()*0.2-0.1;
    }else if(star.alpha>1){
      star.alpha = 1;
      star.ra = -star.ra
    }
    star.x += star.vx;
    if(star.x>=WINDOW_WIDTH){
      star.x = 0;
    }else if(star.x<0){
      star.x = WINDOW_WIDTH;
      star.vx = Math.random()*0.2-0.1;
      star.vy = Math.random()*0.2-0.1;
    }
    star.y += star.vy;
    if(star.y>=WINDOW_HEIGHT){
      star.y = 0;
      star.vy = Math.random()*0.2-0.1;
      star.vx = Math.random()*0.2-0.1;
    }else if(star.y<0){
      star.y = WINDOW_HEIGHT;
    }
    context.beginPath();
    var bg = context.createRadialGradient(star.x, star.y, 0, star.x, star.y, star.r);
    bg.addColorStop(0,'rgba(255,255,255,'+star.alpha+')')
    bg.addColorStop(1,'rgba(255,255,255,0)')
    context.fillStyle  = bg;
    context.arc(star.x,star.y, star.r, 0, Math.PI*2, true);
    context.fill();
    context.closePath();
  }
}

function addStar(){
  for(var i = 0; i<num ; i++){
    var aStar = {
      x:Math.round(Math.random()*WINDOW_WIDTH),
      y:Math.round(Math.random()*WINDOW_HEIGHT),
      r:Math.random()*3,
      ra:Math.random()*0.05,
      alpha:Math.random(),
      vx:Math.random()*0.2-0.1,
      vy:Math.random()*0.2-0.1
    }
    stars.push(aStar);
  }
}

